<template>
  <div class="app-container">
      <el-card>
          <el-tabs v-model="activeName" @tab-click="handleClick ">
              <el-tab-pane label="待分配客户" name="1">
                  <el-row :gutter="10">
                      <el-form ref="form" :model="form" label-width="100px">
                         <el-col :span="6">
                             <el-form-item label="客户昵称：" size="small">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="所属客户：" size="small">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="客户标签：" size="small">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="添加时间：" size="small">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="添加渠道：" size="small" style="margin-bottom:0">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="客户状态：" size="small" style="margin-bottom:0">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6" :offset="6">
                             <el-form-item  style="margin-bottom:0">
                               <div style="text-align:right"> <el-button  size="small" >重置</el-button></div>
                             </el-form-item>
                         </el-col>
                      </el-form>
                  </el-row>
              </el-tab-pane>
              <el-tab-pane label="待分配群聊" name="2">
                  <el-form ref="form" :model="form" label-width="100px">
                         <el-col :span="6">
                             <el-form-item label="群名称：" size="small" style="margin-bottom:0">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="群主：" size="small" style="margin-bottom:0">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6" >
                             <el-form-item label="群标签：" size="small" style="margin-bottom:0">
                                 <el-input v-model="form.name"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6"  >
                             <el-form-item  style="margin-bottom:0">
                               <div style="text-align:right"> <el-button  size="small" >重置</el-button></div>
                             </el-form-item>
                         </el-col>
                      </el-form>
              </el-tab-pane>
          </el-tabs>
      </el-card>
      <el-card class="el-m-t-20" v-if="activeName==1">
          <div class="el-flex">
             <div class="el-flex-1">
                 共0个待分配客户 <span class="el-font-12 el-font-bold-300 el-p-l-20">上次同步时间：2022-01-06 04:23</span>
             </div>
             <el-button type="primary" plain size="small">分配客户</el-button>
             <el-button type="primary" plain size="small">分配记录</el-button>
             <el-button type="primary" plain size="small">同步</el-button>
          </div>
          <el-table :data="data" style="width: 100%" class="el-m-t-20" size="small" :header-cell-style="{'background':'#fafafa'}"	>
              <el-table-column  prop="prop"  label="客户昵称"> </el-table-column>
              <el-table-column  prop="prop"  label="所属客服"> </el-table-column>
              <el-table-column  prop="prop"  label="客户评分"> </el-table-column>
              <el-table-column  prop="prop"  label="客户标签"> </el-table-column>
              <el-table-column  prop="prop"  label="客户状态"> </el-table-column>
              <el-table-column  prop="prop"  label="添加时间"> </el-table-column>
              <el-table-column  prop="prop"  label="上次对话时间"> </el-table-column>
              <el-table-column  prop="prop"  label="添加渠道"> </el-table-column>
              <el-table-column  prop="prop"  label="操作" align="right"> </el-table-column>
              <div slot="empty">
                  <el-empty></el-empty>
              </div>
          </el-table>
      </el-card>
      <el-card class="el-m-t-20" v-if="activeName==2" >
          <div class="el-flex">
             <div class="el-flex-1">
                 共0个待分配群聊 
             </div>
             <el-button type="primary" plain size="small">分配群聊</el-button>
             <el-button type="primary" plain size="small">分配记录</el-button>
          </div>
          <el-table :data="data" style="width: 100%" class="el-m-t-20" size="small" :header-cell-style="{'background':'#fafafa'}"	>
              <el-table-column  prop="prop"  label="群聊名称"> </el-table-column>
              <el-table-column  prop="prop"  label="群主"> </el-table-column>
              <el-table-column  prop="prop"  label="群标签"> </el-table-column>
              <el-table-column  prop="prop"  label="群人数"> </el-table-column>
              <el-table-column  prop="prop"  label="今日入群"> </el-table-column>
              <el-table-column  prop="prop"  label="今日退群"> </el-table-column>
              <el-table-column  prop="prop"  label="创群时间"> </el-table-column>
              <el-table-column  prop="prop"  label="操作" align="right"> </el-table-column>
              <div slot="empty">
                  <el-empty></el-empty>
              </div>
          </el-table>
      </el-card>
  </div>
</template>

<script>
export default {
   data(){
       return{
          activeName:'1',
          form:{}
       }
   },
   methods:{
       handleClick(){

       }
   }
}
</script>

<style>

</style>